<template>
  <div>
    <el-dialog :title="title" :visible.sync="showDialog" v-bind="$attrs" @close="onClose" @open="onOpen"
               v-on="$listeners">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="subData" :rules="rules" label-width="100px" size="medium">
          <el-col :span="14">
            <el-form-item label="菜单名" prop="name">
              <el-input v-model="subData.name" :style="{width: '100%'}" clearable
                        placeholder="请输入菜单名">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="功能路径" prop="appUrl">
              <el-input v-model="subData.appUrl" :style="{width: '100%'}" clearable
                        placeholder="请输入功能路径">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="图标路径" prop="imgUrl">
              <el-input v-model="subData.imgUrl" :style="{width: '100%'}" clearable
                        placeholder="请输入图标路径">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="权限码" prop="permissionCode">
              <el-input v-model="subData.permissionCode" :disabled="tag === 0" :style="{width: '100%'}" clearable
                        placeholder="请输入权限码">
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from '../../utils/request'

export default {
  inheritAttrs: false,
  components: {},
  // 接受父组件传递的值
  props: {
    addOrUpdateVisible: {
      type: Boolean,
      default: false
    },
    subData: {
      type: Object,
      default: null
    },
    title: {
      type: String
    },
    tag: {
      type: Number
    },
    originName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      rules: {
        name: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }, {
          min: 2,
          max: 9,
          message: '长度在 2 到 9 个字符',
          trigger: 'blur'
        }],
        appUrl: [{
          required: true,
          message: '请输入功能路径',
          trigger: 'blur'
        }, {
          min: 5,
          max: 20,
          message: '长度在 5 到 20 个字符',
          trigger: 'blur'
        }],
        imgUrl: [{
          required: true,
          message: '请输入图标路径',
          trigger: 'blur'
        }, {
          min: 5,
          max: 20,
          message: '长度在 5 到 20 个字符',
          trigger: 'blur'
        }],
        permissionCode: [{
          required: true,
          message: '请输入唯一权限码',
          trigger: 'blur'
        }, {
          min: 5,
          max: 20,
          message: '长度在 5 到 20 个字符',
          trigger: 'blur'
        }],
      },
      // 控制弹出框显示隐藏
      showDialog: false,
    }
  },
  computed: {},
  watch: {
    // 监听 addOrUpdateVisible 改变
    addOrUpdateVisible () {
      this.showDialog = this.addOrUpdateVisible
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    onOpen () {
    },
    onClose () {
      this.$refs['elForm'].resetFields()
      this.$emit('changeShow', 'false')
      this.subData.menus = []
    },
    close () {
      this.$refs['elForm'].resetFields()
      this.$emit('changeShow', 'false')
      this.subData.menus = []
    },
    async handleConfirm () {
      let temp = 0
      await this.$refs['elForm'].validate(valid => {
        if (!valid) {
          this.$message({
            message: '请填好表单后提交',
            type: 'warning'
          })
          temp = 1
        }
      })
      if (temp) {
        return
      }
      let data = await request({
        url: '/menu/updateOrAddMenu',
        method: 'post',
        data: {
          id: this.subData.id,
          name: this.subData.name,
          originName: this.originName,
          appUrl: this.subData.appUrl,
          imgUrl: this.subData.imgUrl,
          permissionCode: this.subData.permissionCode,
          parentId: this.subData.parentId,
          tag: this.tag,
        }
      })
      if (data.data.code === '2000') {
        this.$message({
          message: data.data.msg,
          type: 'success'
        })
      } else {
        this.$message({
          message: data.data.msg,
          type: 'error'
        })
      }
      this.$emit('changeShow', 'false')
    },
    // 弹出框关闭后触发
    handleClose () {
      // 子组件调用父组件方法，并传递参数
      this.$emit('changeShow', 'false')
    },
  }
}

</script>
<style>
</style>
